<template>
	<div class="page maintainDetailPic-page" data-page="maintainDetailPic" style="z-index: 2">
		<div class="link-page-nav">
			<a href="#" class="link" @click=$root.backToTab()>
				<i class="iconfont icon-zuo"></i>
			</a>
		</div>
		<div class="link-page-top">
			<div class="link-page-title">作业照片墙</div>
		</div>
		<div class="select-option-fixed">
			<div class="item-type-select" id="maintainDetailPic_select_{{getNewId}}">
				<div class="col" @click="selectCurrentType(1)">作业前</div>
				<div class="col" @click="selectCurrentType(2)">作业后</div>
			</div>
		</div>
		<div class="page-content infinite-scroll-content">
			<div class="maintainDetailPic-page-top" id="imgContent_{{getNewId}}">

			</div>
		</div>
	</div>
</template>

<script>
	return {
		mounted() {
			var self = this;
			self.type = this.$route.params.type;
			self.taskId = this.$route.params.taskId;
		},
		data: function () {
			return {
				getNewId: (new Date()).getTime(),
			}
		},
		methods: {
			//点击不同类型
			selectCurrentType: function (tabId) {
				var self = this;
				jQuery("#maintainDetailPic_select_" + self.getNewId + ">.col").removeClass('select').eq((tabId-1)).addClass('select');
				self.tabId = tabId;
				Dao.getMaintainTaskInfoDto({
					taskId: self.taskId,//任务id
				}, function (data) {
					if (data != null) {
						var beforePicList = data.beforeWorkPicList;
						var afterPicList = data.afterWorkPicList;
						//显示筛选
						if (tabId == 1) {
							self.buildPicData(beforePicList);
						} else if (tabId == 2) {
							self.buildPicData(afterPicList);
						}
					}
				});

			},
			buildPicData: function (picList) {
				var self = this;
				$("#imgContent_" + self.getNewId).empty();
				if (picList != "" && JSON.stringify(picList) != "{}") {
					for (var key in picList) {
						$("#imgContent_" + self.getNewId).append(`
							<div class="dateTitle">`+ key + `</div>
					        <div id="imgHtml_` + (self.getNewId + key) + `"></div>
	           			`);
						var picUrls = picList[key];
						$("#imgHtml_" + self.getNewId + key).empty();
						//展示图片
						showImage(jQuery("#imgHtml_" + self.getNewId + key), picUrls.toString(), 5);
					}

				} else {
					//暂无数据
					$("#imgContent_" + self.getNewId).append(`<div class="no-data-img"><img src="` + listNoDataPic() + `"/></div>`);
				}
			},
		},
		on: {
			pageInit: function (e, page) {
				var self = this;
				self.selectCurrentType(self.type);
			},
		}
	}
</script>